const extractDataFromElements =`
    (function(element)
    {
        const rectangle = element.getBoundingClientRect() ;
        
        const directText = Array.from(element.childNodes)
        .filter(node => node.nodeType === Node.TEXT_NODE)
        .map(node => node.textContent.trim()).join(' ').trim();

        function getOptionValuesIfSelect(element)
        {
            if(element.tagName.toLowerCase() == 'select') return element.textContent?.trim() || null ;
            else return element.innerText?.trim() || null; 
        }

        return {
            tag: element.tagName.toLowerCase(),
            type: element.getAttribute('type'),
            role: element.getAttribute('role'),
            ariaLabel: element.getAttribute('aria-label'),
            placeholder: element.getAttribute('placeholder'),
            name: element.getAttribute('name'),
            title: element.getAttribute('title'),
            label: element.getAttribute('label'),
            boundingBox: {
                x: rectangle.x,
                y: rectangle.y,
                width: rectangle.width,
                height: rectangle.height
            },
            value: element.value || null,
            itsOwnText: directText || null,
            innerText: getOptionValuesIfSelect(element),
            href: element.getAttribute('href') || null,
            id: element.id || null,
            class: element.getAttribute('class') || null
        };
    })
`;


const checkIfVisible = `
(function isVisible(element) 
{
    function isStyleVisible(el) 
    {
        const style = window.getComputedStyle(el);
        return (
            style &&
            style.display !== 'none' &&
            style.visibility !== 'hidden' &&
            style.visibility !== 'collapse'
        );
    }

    function importantElement(el)
    {
        const tag = el.tagName.toLowerCase() ;
        const importantTags = ['button', 'input', 'select', 'textarea'] ;
        return importantTags.includes(tag) ;
    }

    function isNotObscured(el) 
    {
        if(importantElement(el)) return true;
        const rect = el.getBoundingClientRect();
        const center_x = rect.left + rect.width/2;
        const center_y = rect.top + rect.height/2;
        const topEl = document.elementFromPoint(center_x, center_y);
        return el === topEl || el.contains(topEl);
    }

    const rect = element.getBoundingClientRect();
    return (
        rect.width > 0 &&
        rect.height > 0 &&
        isNotObscured(element) &&
        isStyleVisible(element)
    );
})
`;

const everythingSelector = '*';

const reducedSelector = `
h1, h2, h3, h4, h5, h6,
p, li, div, label,
a, button, input, select, textarea,
yt-formatted-string, tr
`.trim() ;


export class scrapingUtils
{
    static getCheckIfVisibleFunctionString()
    {
        return checkIfVisible ;
    }

    static getExtractDataFromElementsFunctionString()
    {
        return extractDataFromElements ;
    }

    static getEverythingSelector()
    {
        return everythingSelector ;
    }

    static getReducedSelector()
    {
        return reducedSelector ;
    }
}